<template>
  <div :style="{overflowY: 'auto'}">
    <PreviewDialog :calculatorSore="calculatorSore"
                   :describeContent="describeContent"
                   :fields="fields"
                   :medicalCalculatorData="medicalCalculatorData"
                   :type="cntFormulaType"
                   ref="preview" />
    <el-row>
      <div class="font-title">基本信息</div>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="align-right right-space">
          <span>任务名称：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div>{{task.basicInfo.name}}</div>
      </el-col>
      <el-col :span="3">
        <div class="align-right right-space">
          <span>是否支持自建：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div v-if="task.basicInfo.selfAdd === true">支持自建</div>
        <div v-else>不支持自建</div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="align-right right-space">
          <span>所属知识体系：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div v-if="task.basicInfo.system === 'knowledge'">标准知识库</div>
        <div v-else-if="task.basicInfo.system === 'calc'">医学计算器</div>
        <div v-else-if="task.basicInfo.system === 'flowchart'">流程图</div>
        <div v-else></div>
      </el-col>
      <el-col :span="3">
        <div class="align-right right-space">
          <span>所属知识库：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div>{{task.basicInfo.libName}}</div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="align-right right-space">
          <span>开始结束时间：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div>{{task.basicInfo.dateRange[0] + "到" + task.basicInfo.dateRange[1]}}</div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="align-right right-space">
          <span>审核级别：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div v-if="task.basicInfo.reviewLevel === 1">初审</div>
        <div v-else-if="task.basicInfo.reviewLevel === 2">复审</div>
        <div v-else-if="task.basicInfo.reviewLevel === 3">终审</div>
        <div v-else></div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="align-right right-space">
          <span>上传附件：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div v-for="(file, index) in task.basicInfo.fileList"
             :key="index">{{file.name}}</div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="align-right right-space">
          <span>备注信息：</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div>{{task.basicInfo.comment}}</div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="8">
        <div class="font-title">子任务列表</div>
      </el-col>
      <el-col :span="16"
              style="right: auto">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="name"
                      placeholder="请输入任务名称"
                      size="small"
                      @keyup.enter.native="getTableData">
              <i slot="prefix"
                 class="el-input__icon el-icon-search"></i>
              <el-button slot="append"
                         :icon="appendIcon"
                         @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div v-if="showAdvance"
               id="advance"
               style="padding: 10px; float: right">
            <div>
              <div style="width: 100px;text-align:right; display: inline-block">
                <span>编辑</span>
              </div>
              <div style="display: inline-block">
                <el-select v-model="editor"
                           clearable
                           filterable
                           placeholder="请选择"
                           size="small"
                           style="width: 300px">
                  <el-option v-for="(item,index) in editorList"
                             :key="index"
                             :label="item.name + ' ' + item.roleNames"
                             :value="item.userName">
                  </el-option>
                </el-select>
              </div>
              <div v-if="task.basicInfo.reviewLevel>0">
                <div style="display: inline-block;margin-top: 10px">
                  <div style="width: 100px;text-align:right; display: inline-block">
                    <span>初审编辑</span>
                  </div>
                  <div style="display: inline-block">
                    <el-select v-model="first_auditor"
                               clearable
                               filterable
                               placeholder="请选择"
                               size="small"
                               style="width: 300px">
                      <el-option v-for="(item,index) in auditorList"
                                 :key="index"
                                 :label="item.name + ' ' + item.roleNames"
                                 :value="item.userName">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div v-if="task.basicInfo.reviewLevel>1">
                <div style="display: inline-block;margin-top: 10px">
                  <div style="width: 100px;text-align:right; display: inline-block">
                    <span>复审编辑</span>
                  </div>
                  <div style="display: inline-block">
                    <el-select v-model="second_auditor"
                               clearable
                               filterable
                               placeholder="请选择"
                               size="small"
                               style="width: 300px">
                      <el-option v-for="(item,index) in auditorList"
                                 :key="index"
                                 :label="item.name + ' ' + item.roleNames"
                                 :value="item.userName">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div v-if="task.basicInfo.reviewLevel>2">
                <div style="display: inline-block;margin-top: 10px">
                  <div style="width: 100px;text-align:right; display: inline-block">
                    <span>终审编辑</span>
                  </div>
                  <div style="display: inline-block">
                    <el-select v-model="third_auditor"
                               clearable
                               filterable
                               placeholder="请选择"
                               size="small"
                               style="width: 300px">
                      <el-option v-for="(item,index) in auditorList"
                                 :key="index"
                                 :label="item.name + ' ' + item.roleNames"
                                 :value="item.userName">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>

              <div style="margin-top: 10px">
                <div style="width: 100px;display: inline-block;text-align: right">状态</div>
                <div style="display: inline-block;">
                  <el-select v-model="status"
                             clearable
                             filterable
                             placeholder="请选择"
                             size="small"
                             style="width: 300px">
                    <el-option v-for="item in CONST.TASK_ITEM_STATUS"
                               :label="item.key"
                               :key="item.key"
                               :value="item.value"></el-option>
                  </el-select>
                </div>
              </div>

            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="7"
                        :span="9">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small"
                               v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="0.8"
                        :span="2">
                  <div div
                       style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small"
                               type="success"
                               v-on:click="replacement">重 置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2"
                        :span="2">
                  <div div
                       style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small"
                               type="success"
                               v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-table :data="UTIL.isNotEmpty(task.basicInfo.id) ? task.subTask : task.subTask.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                highlight-current-row>
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="50">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
                         label="子任务名称"
                         min-width="100"
                         prop="name">
          <template slot-scope="scope">
            <span v-html="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column label="类型"
                         min-width="100"
                         prop="type">
          <template slot-scope="scope">
            <span v-if="0 === scope.row.type ">非自建</span>
            <span v-else-if="1 === scope.row.type">自建</span>
            <span v-else-if="2 === scope.row.type">修订</span>
          </template>
        </el-table-column>
        <el-table-column label="状态"
                         min-width="100"
                         prop="status">
          <template slot-scope="scope">
            <span>{{ getStatusName(scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
                         label="编辑"
                         min-width="100"
                         prop="editor">
          <template slot-scope="scope">
            <span>{{ getEditorName(scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成字数"
                         min-width="100"
                         prop="wordsCount">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
                         label="初审编辑"
                         min-width="100"
                         prop="firstAuditor">
          <template slot-scope="scope">
            <span>{{ getFirstAuditorName(scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="task.basicInfo.reviewLevel > 1"
                         :show-overflow-tooltip="true"
                         label="复审编辑"
                         min-width="100"
                         prop="secondAuditor">
          <template slot-scope="scope">
            <span>{{ getSecondAuditorName(scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="task.basicInfo.reviewLevel > 2"
                         :show-overflow-tooltip="true"
                         label="终审编辑"
                         min-width="100"
                         prop="thirdAuditor">
          <template slot-scope="scope">
            <span>{{ getThirdAuditor(scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
                         label="备注"
                         min-width="100"
                         prop="remark">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
                         label="操作"
                         min-width="100">
          <template slot-scope="scope">
            <span>
              <el-link type="primary"
                       @click.prevent="detailById(scope.row.knowledgeId, scope.row.status)">查看</el-link>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination :current-page="currentPage"
                     :page-size="pageSize"
                     :page-sizes="[5, 10, 15, 20, 50, 100]"
                     :total="UTIL.isNotEmpty(task.basicInfo.id) ? totalNum : task.subTask.length"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     style="float: right">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import PreviewDialog from "../../calculator/exportModel/PreviewDialog";

export default {
  components: {
    PreviewDialog,
  },
  name: "TaskDetail",
  props: ["task"],
  data () {
    return {
      name: '',
      status: '',
      editor: '',
      first_auditor: '',
      second_auditor: '',
      third_auditor: '',
      multiplePages: true,
      appendIcon: "el-icon-caret-bottom",
      noData: true,
      showAdvance: false,
      knowledgeStatus: '',
      pageHeight: 0,
      previewDialogVisible: false,
      medicalCalculatorData: [],
      calculatorSore: [],
      describeContent: '',
      fields: [],
      cntFormulaType: 1,
      currentPage: 1,
      pageSize: 10,
      taskData: [],
      totalNum: 0
    }
  },
  computed: {
    editorList () {
      return this.$store.state.userList
    },
    auditorList () {
      return this.$store.state.userList
    },
  },
  methods: {
    getStatusName (scope) {
      return CONST.TASK_ITEM_STATUS.find(item => item.value === scope.row.status)
        && CONST.TASK_ITEM_STATUS.find(item => item.value === scope.row.status).key
    },
    getEditorName (scope) {
      return this.editorList.find(item => item.userName === scope.row.editor)
        && this.editorList.find(item => item.userName === scope.row.editor).name
    },
    getFirstAuditorName (scope) {
      return this.auditorList.find(item => item.userName === scope.row.firstAuditor)
        && this.auditorList.find(item => item.userName === scope.row.firstAuditor).name
    },
    getSecondAuditorName (scope) {
      return this.auditorList.find(item => item.userName === scope.row.secondAuditor)
        && this.auditorList.find(item => item.userName === scope.row.secondAuditor).name
    },
    getThirdAuditor (scope) {
      return this.auditorList.find(item => item.userName === scope.row.thirdAuditor)
        && this.auditorList.find(item => item.userName === scope.row.thirdAuditor).name
    },
    detailById: function (id, status) {
      if ('' === id) {
        this.$message({
          message: '该子任务还未建对应的知识',
          type: 'warning'
        });
        return;
      }
      this.knowledgeStatus = (status === 8 ? 'published' : 'unpublished');
      let systemType = this.task.basicInfo.system;
      if (systemType === 'knowledge') {
        this.$store.commit('setKnowledgeDetailId', id)
        this.$store.commit('setKnowledgeDetailStatus', this.knowledgeStatus)
        this.$store.commit('showKnowledgeDetail')
      } else if (systemType === 'calc') {
        let url = ''
        if (status !== 8) {
          url = '/pmph/action/medicalCalculator/selectDataById'
        } else {
          url = '/pmph/action/medicalCalculator/selectReleasedCalculatorById'
        }
        let that = this
        this.axios.get(url, {
          params: {
            id: id,
          }
        }).then((response) => {
          that.medicalCalculatorData = response.data.medicalCalculatorData
          that.calculatorSore = response.data.calculatorSore
          that.describeContent = response.data.describeContent
          if (!this.describeContent) {
            this.describeContent = '无'
          }
          that.fields = response.data.fields
          for (let i = 0; i < that.fields.length; i++) {
            if (that.fields[i].kind === 1) {
              that.fields[i].property = JSON.parse(that.fields[i].property)
            }
          }
          that.cntFormulaType = response.data.type
          that.previewDialogVisible = true
        });
      } else if (systemType === 'flowchart') {
        let routeUrl = this.$router.resolve({
          path: "/flowchart/mobileViewFlowChart",
          query: {
            id: id,
            status: this.knowledgeStatus
          },
        });
        window.open(routeUrl.href, "_blank");
      }
    },
    handleCurrentChange (val) {
      this.currentPage = val
     this.getTableData()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getTableData()
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    getTableData () {
      this.axios.get('/pmph/action/task/selectDetailTableData', {
        params: {
          currentPage: this.currentPage,
          pageNum: this.pageSize,
          taskId: this.$route.query.id,
          name: this.name,
          status: this.status,
          editor: this.editor,
          first_auditor: this.first_auditor,
          second_auditor: this.second_auditor,
          third_auditor: this.third_auditor,
        }
      }).then((response) => {
        console.log(response);
        this.noData = response.data.totalNum <= 0;
        this.task.subTask = response.data.tableData;
        this.totalNum = response.data.totalNum;
      })
    },
    advanceConfirm () {
      this.getTableData();
      this.showAdvance = false;
    },
    replacement: function () {
      this.name = ''
      this.status = ''
      this.editor = ''
      this.first_auditor = ''
      this.second_auditor = ''
      this.third_auditor = ''
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
  },

  created () {
    if (this.$route.query.id) {
      this.getTableData()
    }
    this.pageHeight = CONST.WORKSPACE_HEIGHT - 180
  }
}
</script>

<style scoped>
.bottom-space {
  margin-bottom: 10px;
}

.right-space {
  margin-right: 10px;
}

.align-right {
  float: right;
}

.font-title {
  font-size: 30px;
  color: #2db7a0;
}
</style>
